<template>
    <!-- props实现响应式数据 -->
    <div>{{text}}<button @click="change">加载</button> 父组件传过来的数据：{{content}}</div>
</template>

<script>
    export default {
        props:{
            content:{
                type:String
            }
        },
        data(){
            return{
                text:this.content
            }
        },
        methods:{
            change(){
                this.text = "loading";
                setTimeout(() => this.text = this.content,3000);
            }
        },
        watch:{
            content(v){
                this.text = v;//实现text的响应
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>